<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <title>添加地址</title>
    <link href="${pageContext.request.contextPath}/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/assets/css/amazeui.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/basic/css/demo.css" rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/basic/css/LArea.min.css" rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/basic/css/honeySwitch.css" rel="stylesheet" type="text/css" />


    <script src="${pageContext.request.contextPath}/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/assets/js/amazeui.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
</head>
<style type="text/css">
body {
    background-color: #EEEEEE;
}

.addressmone {
    width: 100%;
    overflow: hidden;
    background: #fff
}

.addressmone ul {
    width: 100%;
    overflow: hidden;
    margin: auto;
    background-color: #eee;
}

.addressmone ul li {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
        padding: 0 10px;
        margin-bottom: 1px;
}

.addressmone ul li span {
    display: block;
    float: left;
    width: 30%;
    font-size: 16px;
    line-height: 45px;
    color: #666;
}

.addressmone ul li input {
    display: block;
    float: left;
    width: 60%;
    background: none;
    border: 0px;
    font-size: 16px;
    color: #333;
    line-height: 45px;
}
.addressmone ul li textarea {
    display: block;
    float: left;
    width: 100%;
    background: none;
    border: 0px;
    font-size: 16px;
    color: #333;
    padding: 10px 0px;

}

.addressmone ul li select {
    display: block;
    float: left;
    background: none;
    height: 45px;
    border: 0px;
    font-size: 16px;
    color: #333;
    line-height: 45px;
    padding-right: 10px;
    -webkit-appearance: none;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    border-radius: 0;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
}
</style>

<body>
    <header data-am-widget="header" class="am-header am-header-default" style="background-color: #F9F9F9">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-angle-left am-icon-sm" style="color: #FFAD01;"></i>
            </a>
        </div>
        <h1 class="am-header-title">
          <a href="#title-link" class="">
            添加地址
          </a>
      </h1>
        <div class="am-header-right am-header-nav">
            <a href="#right-link" class="" style="color: #FFAD01;font-size: 18px;" onclick="save()">

               保存
          </a>
        </div>
    </header>
    <div class="addressmone">
        <ul>
            <li>
                <span>收件人</span>
                <input type="text" name="" id="name">
            </li>
            <li>
                <span>联系电话</span>
                <input type="phone" name="" id="phone">
            </li>
            <li>
                <span>所在地区</span>
                <input type="text" name="" id="demo1" readonly="">
                <input type="hidden" name="" id="value1">
            </li>
            <li>
                <textarea placeholder="请填写详细地址" rows="3" id="add_desc"></textarea>
            </li>
            <li style="margin-top: 10px;">
                <span>设为默认</span>
                <span class="switch-off" themeColor="#FFAD01" id="fly" style="width: 50px;margin-top: 7px;float: right;"> </span>
            </li>
        </ul>
    </div>
</body>
<script src="${pageContext.request.contextPath}/basic/js/LArea.min.js"></script>
<script src="${pageContext.request.contextPath}/basic/js/LAreaData1.js"></script>
<script src="${pageContext.request.contextPath}/basic/js/honeySwitch.js"></script>

<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
 <script type="text/javascript">
    var area1 = new LArea();
    area1.init({
        'trigger': '#demo1', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
        'valueTo': '#value1', //选择完毕后id属性输出到该位置
        'keys': {
            id: 'id',
            name: 'name'
        }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
        'type': 1, //数据源类型
        'data': LAreaData //数据源
    });
    function save(){
        var json = {};
        json.name = $("#name").val();
        json.phone = $("#phone").val();
        json.address = $("#demo1").val() + " "+$("#add_desc").val();
        json.isDefault = $("#fly").hasClass("switch-on");
        $.ajax({
            type: "post",
            url: '${pageContext.request.contextPath}/clientAddress/add',
            data: json,
            dataType: 'json',
            success: function (data) {
                if (data.success == true) {
                    setInterval(function () {
                        window.location.href = "${pageContext.request.contextPath}/clientHome/goAddress"
                    }, 2000);
                    layer.msg('添加成功,2秒后自动返回。');
                }else {
                    layer.msg(data.msg);
                }

            },
            error: function () {
                layer.msg('网络超时');
            }

        });
    }
    </script>

</html>
